<template>
    <div class="wrapper">
        <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" />
        <div class="wrapper__input">
            <input 
                placeholder="用户名" 
                type="text" 
                class="wrapper__input__content"
                v-model="data.username"
             />
        </div>
         <div class="wrapper__input">
            <input 
               placeholder="请输入密码" 
               type="password" 
               class="wrapper__input__content"
                v-model="data.password"
             />
        </div>
        <div class="wrapper__login-button" @click="handleLogin">登录</div>
        <div class="wrapper__login-link"  @click="handleRegisterClick">立即注册</div>
    </div>
    <Toast v-if="showTip" :message="toastMessage" />
</template>

<script>
import { useRouter } from 'vue-router';
import { reactive } from 'vue';
import Toast,{useToastEffect} from '@/components/Toast';
import { LoginData } from "@/api/http"

export default {
    name: 'Login',
    components:{ Toast },
    setup() {
        let data = reactive({
            password: '',
            username: ''
        })

        const { showTip, toastMessage, showToast } = useToastEffect()
        const router = useRouter();
        const handleLogin = async ()=>{
        //    console.log(showToast)
            // showToast('1233')
            // toastData.showTip=true
            // let { username,password } = data
            // const res = await HotList()
            // console.log(res)
            localStorage.isLogin = true;
            router.push({name: 'Home'})
        }
        const handleRegisterClick = ()=>{
            router.push({name: 'Register'})
        }
        return { data, handleLogin, handleRegisterClick, showTip, toastMessage }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.wrapper{
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   &__img {
       display: block;
       width: .66rem;
       height: .66rem;
       margin: 0 auto .4rem auto;
   }
   &__input {
       height: .48rem;
       margin: 0 .4rem .16rem .4rem;
       padding:0 .16rem;
       box-sizing: border-box;
       background: #f9f9f9;
       border: 1px solid rgba(0,0,0,.1);
       border-radius: 6px;
      &__content{
         line-height: .48rem;
         border:none;
         outline: none;
         width: 100%;
         font-size: 0.16rem;
         background: none;
         color: $content-notice-fontcolor;
         &::placeholder{
            color: $content-notice-fontcolor;
         }
      }
   }
   &__login-button {
       margin: .32rem .4rem 0.16rem .4rem;
       line-height: .48rem;
       background: $btn-bgColor;
       box-shadow: 0 .04 .08rem 0 raba(0,145,255,0.32);
       border-radius: 0.04rem;
       font-size: 0.16rem;
       text-align: center;
       color: #fff;
   }
   &__login-link {
        font-size: 0.14rem;
        text-align: center;
        color: $content-notice-fontcolor;
   }
}
</style>